36장 디스트럭처링 할당

디스트럭처링 할당 aka, 구조 분해 할당은 배열과 같은 이터러블 또는 객체를 벗겨서 필요한 값만 추출하는 것을 말한다.

배열 디스트럭처링 할당

var arr = [1, 2, 3];

var one   = arr[0];
var two   = arr[1];
var three = arr[2];

console.log(one, two, three); // 1 2 3

원래 이렇게 배열의 값을 추출하려면 일일히 개고생해야 했는데.

const arr = [1, 2, 3];

// ES6 배열 디스트럭처링 할당
// 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다.
// 이때 할당 기준은 배열의 인덱스다.
const [one, two, three] = arr;

console.log(one, two, three); // 1 2 3

짜짠~ 이렇게 이쁘게 됩니다.

배열 디스트럭처링 할당 기준은 배열의 인덱스다. 즉, 순서대로 할당된다
→ 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요가 없다.

기본값을 설정할 수 있다.

// 기본값
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3

// 기본값보다 할당된 값이 우선한다.
const [e, f = 10, g = 3] = [1, 2];
console.log(e, f, g); // 1 2 3

Rest 요소를 사용할 수 있다.

// Rest 요소
const [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]

객체 디스트럭처링 할당

const user = { firstName: 'Ungmo', lastName: 'Lee' };

// ES6 객체 디스트럭처링 할당
// 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
// 이때 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
const { lastName, firstName } = user;

console.log(firstName, lastName); // Ungmo Lee

할당 기준은 프로퍼티키이다. 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

객체 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값 할당 받을 수도 있지만, 익숙하지 않으면 헷갈리는 구조이다.

const user = { firstName: 'Ungmo', lastName: 'Lee' };

// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다.
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당하고,
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당한다.
const { lastName: ln, firstName: fn } = user;

console.log(fn, ln); // Ungmo Lee

중첩 객체의 경우

const user = {
  name: 'Lee',
  address: {
    zipCode: '03068',
    city: 'Seoul'
  }
};

// address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출한다.
const { address: { city } } = user;
console.log(city); // 'Seoul'

reference